<template>
  <div id="news">

    <nav>
      <ul>
        <router-link
          v-for="(item, index) in navigators"
          :key="index"
          :to="item.link"
          tag="li">
          <a>
            <article></article>
            <h2 v-text="item.name"></h2>
          </a>
        </router-link>
      </ul>
    </nav>

    <section class="carousel">
      <swipe class="swipe-container" :auto="0">
        <swipe-item v-for="(item, index) in slides" :key="index">
          <router-link :to="'/news/news-detail/' + item.aid" tag="a">
            <img :src="item.img" alt="">
          </router-link>
        </swipe-item>
      </swipe>
    </section>

    <section class="divider">
      <div class="line">
        <span>最新资讯</span>
      </div>
    </section>

    <!-- 引入资讯列表 -->

    <section class="contents">
      <comp-news-list></comp-news-list>
    </section>

    <!-- 底部导航栏 -->
    <comp-footer></comp-footer>
  </div>
</template>

<script>
  import { Swipe, SwipeItem } from 'mint-ui';
  import CompFooter from '../comp/comp-footer.vue';
  import CompNewsList from '../comp/comp-news-list.vue';
  export default {
    name: 'news',
    components: {
      Swipe,
      SwipeItem,
      CompFooter,
      CompNewsList
    },
    data() {
      return {

        // 5个类别，样式与数据耦合，后端接口设计问题，tag

        navigators: [
          {
            name: '',
            link: '/news/news-type/1'
          },
          {
            name: '',
            link: '/news/news-type/2'
          },
          {
            name: '',
            link: '/news/news-type/3'
          },
          {
            name: '',
            link: '/news/news-type/4'
          },
          {
            name: '',
            link: '/news/news-type/5'
          }
        ],

        // 轮播图

        slides: []
      }
    },
    created() {

      // 查询资讯类型（navigator） 赋值

      this.$http.post({
        api: this.$api.NEWS_TYPE,
        success: function (res) {
          for (let i = 0; i < res.data.data.length; i++) {
            this.navigators[i].name = res.data.data[i].name;
          }
        }.bind(this)
      });

      // 轮播图

      this.$http.post({
        api: this.$api.PUBLIC_ADVERT_LIST,
        params: {
          type: 2
        },
        success: function (res) {
          if (res.data.data.length) {
            this.slides = res.data.data;
          }
        }.bind(this)
      });
    }
  }
</script>

<style scoped lang="scss">

  #news {
    padding-bottom: $comp-footer-height;

    $nav-height: 88px;
    $nav-icon-side: 40px;
    $banner-height: 8rem;

    >nav {
      background: $white;
      height: $nav-height;

      >ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: $size-as-parent;

        article {
          width: $nav-icon-side;
          height: $nav-icon-side;
          margin: $margin-auto .4rem;
          background: url("../../assets/images/news/navigators.png") no-repeat center / auto $nav-icon-side;
        }

        >li:nth-of-type(1) article {
          background-position: 0 0;
        }
        >li:nth-of-type(2) article {
          background-position: -73px 0;
        }
        >li:nth-of-type(3) article {
          background-position: -145px 0;
        }
        >li:nth-of-type(4) article {
          background-position: -218px 0;
        }
        >li:nth-of-type(5) article {
          background-position: -291px 0;
        }

        h2 {
          text-align: center;
          font-size: 1.2rem;
          color: #333;
        }
      }
    }

    >.carousel {
      height: $banner-height;

      >.swipe-container {
        height: $size-as-parent;

        a {

          >img {
            width: $size-as-parent;
            height: $size-as-parent;
          }
        }


      }
    }

    >.divider {
      height: 1.8rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      background: $white;

      >.line {
        height: .1rem;
        background: #ccc;
        display: flex;
        justify-content: space-around;
        align-items: center;

        >span {
          position: relative;
          padding: 0 .2rem;
          font-size: 1rem;
          color: #ccc;
          background: $white;
        }
      }
    }

    >.contents {
      padding: $news-list-padding;
      background: $white;
    }
  }
</style>
